<template>
	<div class="app-container">
		<div class="fileup">
			<!-- <el-divider content-position="left">文档信息</el-divider> -->
			<div class="uping" v-for="(item,index) in fileNum" :key="index">
        <p>
          <span>资料名</span>
          <input v-model="item.filename" type="text" placeholder="请输入您要上传的资料名" />
        </p>
        <p>
          <span>上传资料</span>
          <el-upload
            class="upload-demo"
            drag
            :data="index"
            :show-file-list="false"
            :http-request="designUpFile"
            action=""
            :multiple='false'
            limit='1'
            >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <p style="margin: 0;">
            <strong v-if="item.filePath">{{item.filename}}</strong>
            <strong v-if="item.filePath" @click="downLoad(item.filePath)">下载<i class="el-icon-download" /></strong>
          </p>
        </p>
			</div>
		</div>
		<div class="submits">
			<div class="add" @click="addfile">新增文档</div>
			<div class="save" @click="saveOrder">保存</div>
			<div class="nosave" @click="nosaveOrder">取消</div>
		</div>
	</div>
</template>

<script>
  import { addProduct,getCangku,updateProduct } from "@/api/cangku";
  import { uploadFile,addPeople,getUserFiles } from '@/api/people'
	export default{
		data(){
			return{
				fileNum: [{
					filename: '',
					filePath: ''
				}]
			}
		},
		mounted(){
			console.log(this.$route.params)
			if(this.$route.params.options){
				this.tempData = JSON.parse(this.$route.params.options)
				this.writeOradd = 1
        this.getFilesList(this.tempData.id)
			}else{
				this.writeOradd = 0
			}
		},
		methods:{
			// 获取商品文档信息
			getFilesList(id){
				getUserFiles({parentId: id}).then(res => {
					console.log(res)
					if(res.data.list.length != 0){
						this.fileNum = []
						res.data.list.map(item => {
							this.fileNum.push({
								filename: item.fileDescribe,
								filePath: item.fileName
							})
						})
					}else{
						if(tempindex != index){
							this.fileNum = [{
								filename: '',
								filePath: ''
							}]
						}
					}
				})
			},
			downLoad(filepath){
				window.location.href = filepath
			},
			// 保存
			saveOrder(item) {
        this.$router.go(-1)
			},
			// 上传商品文件
			designUpFile(item) {
				console.log('item')
				console.log(item)
				var formData = new FormData()
				formData.append("file", item.file)
				formData.append('content', this.fileNum[item.data].filename)
				uploadFile(formData).then(res => {
					console.log(res)
					this.fileNum[item.data].filePath = res
					this.$forceUpdate()
					this.uploadOver = true
					addPeople({fileName: res,fileDescribe:this.fileNum[item.data].filename,parentId: this.tempData.id}).then(res => {
						console.log(res)
						this.$message({
							showClose: true,
							message: '添加成功',
							type: "success"
						})
					})
				})
			},
			addfile(){
				this.fileNum.push({
					filename: '',
					filePath: ''
				})
			},
			nosaveOrder(){
				this.$router.go(-1)
			},
			back(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.submits{
		display: flex;
		padding: 15px 20px;
		background: #fff;
		margin-top: 20px;
		border-radius: 8px;
		justify-content: flex-end;
		align-items: center;
		>div{
			width: 80px;
			height: 32px;
			text-align: center;
			line-height: 32px;
			color: #fff;
			font-size: 14px;
			border-radius: 4px;
			margin-left: 30px;
			cursor: pointer;
		}
		.add{
			background: #18a05e;
		}
		.save{
			background: #2196F3;
		}
		.nosave{
			background: #999;
		}
	}
	.fileup{
    position: relative;
    padding: 20px;
    background: #fff;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-wrap: wrap;
    // align-items: center;
    justify-content: space-between;
    .uping{
      width: 48%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      > p {
        width: 90%;
        font-size: 14px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        color: #333;
        /deep/.el-input__inner {
          // width: inherit;
          background: none;
          height: 32px;
          // line-height: 32px;
          color: #333;
          border: 1px solid rgba(0, 0, 0, 0.1);
          padding: 0 25px;
        }
        /deep/.el-input__icon {
          line-height: 32px;
        }
        /deep/.el-upload-dragger {
          width: 100%;
          height: 100px;
        }
        /deep/.el-upload-dragger .el-icon-upload {
          font-size: 60px;
          color: #C0C4CC;
          margin: 0; 
          line-height: 1;
          width: 100%;
        }
        /deep/.el-upload {
          width: 100%;
        }
        .userselect {
          // max-width: 250px;
          flex: 1;
        }
      
        > span {
          display: block;
          width: 100px;
          text-align: right;
          padding-right: 15px;
        }
        > input {
          width: inherit;
          flex: 1;
          height: 32px;
          border-radius: 3px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          padding-left: 10px;
          color: #333;
        }
        >strong{
          display: inline-block;
          padding-left: 100px;
          font-weight: 100;
          font-size: 14px;
          &:last-child{
            cursor: pointer;
            color: #13ce66;
            font-weight: 600;
          }
        }
        >div{
          width: inherit;
          flex: 1;
        }
      }
    }
  }
</style>
